import { useState, useEffect } from "react";
import "./index.less";
import Profile from "./components/Profile/index"
import Setting from "./components/Setting/index"
import Qiandao from "./components/Qiandao/index"
import Authentication from "./components/Authentication/index"
import Suggestion from "./components/Suggestion/index"
import DownloadLink from "./components/DownloadLink/index"
import { request } from "../../../common/request";
import { urls } from "../../../common/urls";
import { getUserInfo } from '../../../util';

function ProfileContent({ currPage }: any) {
  const [subTitle, setSubTitle] = useState('');
  const [profileList, setProfileList] = useState({} as any);
  const userInfo = getUserInfo();

  useEffect(() => {
    setProfileList(userInfo);
  }, []);

  const setProfileListData = (data: any) => {
    setProfileList(data);
    localStorage.setItem("profileList", JSON.stringify(data));
  };

  const handleCurrPage = (page: any) => {
    switch (page.name) {
      case 'profile':
        return <Profile profileList={profileList} setProfileList={setProfileListData} />
      case 'qiandao':
        return <Qiandao />
      case 'authentication':
        return <Authentication profileList={profileList} setProfileList={setProfileListData} />
      case 'suggestion':
        return <Suggestion />
      case 'downloadLink':
        return <DownloadLink />
      case 'setting':
        return <Setting setCurSubTitle={setSubTitle} profileList={profileList} setProfileList={setProfileListData} />
    }
  }

  return (
    <>
      <div className="profile-content">
        <div className="profile-content-title text-style">
          {currPage.title}
          {
            currPage.name === 'setting' && subTitle && <div className="profile-content-subtitle div-style"> {">"} {subTitle}</div>
          }
        </div>
        {handleCurrPage(currPage)}
      </div>
    </>
  );
}

export default ProfileContent;
